<template>
    <NDrawer v-model:show="visible" width="80%" placement="right">
        <NDrawerContent title="汇款审核">
            <NDescriptions title="订单信息" :column="2" label-placement="left">
                <NDescriptionsItem>
                    <template #label>订单号</template>
                    {{ detail?.orderNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>UID</template>
                    {{ detail?.uid }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>卡号</template>
                    {{ detail?.cardNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>手续费</template>
                    {{ detail?.handlingFee }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>总支付金额</template>
                    {{ detail?.amount }} {{ detail?.senderCurrency }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>汇款金额</template>
                    {{ detail?.extendedAmount }} {{ detail?.receiverCurrency }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>创建时间</template>
                    {{ detail?._createdAt }}
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="收款人信息" :column="2" label-placement="left">
                <NDescriptionsItem>
                    <template #label>国家/地区</template>
                    {{ detail?.location }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>收款银行</template>
                    {{ detail?.bankName }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>银行卡号</template>
                    {{ detail?.bankCardNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>收款人姓名</template>
                    {{ detail?.nameEn }}
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="操作" label-placement="left">
                <NDescriptionsItem>
                    <template #label>当前状态</template>
                    <NTag v-if="detail?.status === 1" size="small" type="warning"> {{ RemittanceStatus['1'] }} </NTag>
                    <NTag v-else-if="detail?.status === 2" size="small" type="success">
                        {{ RemittanceStatus['2'] }}
                    </NTag>
                    <NTag v-else-if="detail?.status === 3" size="small" type="error">
                        {{ RemittanceStatus['3'] }}
                    </NTag>
                    <NTag v-else-if="detail?.status === 4" size="small">{{ RemittanceStatus['4'] }}</NTag>
                </NDescriptionsItem>
                <NDescriptionsItem v-if="detail?.status === 1">
                    <template #label>状态更改</template>
                    <NButton size="small" @click="handleStatusUpdate(3)">失败</NButton>
                    <NButton class="ml-2" @click="handleStatusUpdate(4)" size="small" type="error">拒绝</NButton>
                    <NButton class="ml-2" @click="handleStatusUpdate(2)" size="small" type="primary">已汇款</NButton>
                </NDescriptionsItem>
            </NDescriptions>
        </NDrawerContent>
    </NDrawer>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, watch } from 'vue'
import { useMessage } from 'naive-ui'
import { queryNewRemittanceDetail, updateNewRemittanceStatus } from '@/api/bill'
import { RemittanceStatus } from '@/constants/bill'

defineOptions({
    name: 'DetailDrawer'
})

const props = defineProps<{
    orderNumber: string | undefined
}>()
const emits = defineEmits<{
    refresh: []
}>()

const visible = defineModel<boolean>({
    required: true
})

const message = useMessage()
const statusLoading = ref(false)
const status = ref<Api.Bill.NewRemittance['status']>(1)
const handleStatusUpdate = async (value: Api.Bill.NewRemittance['status']) => {
    statusLoading.value = true
    const [err, res] = await updateNewRemittanceStatus(props.orderNumber!, value)
    statusLoading.value = false
    if (!err && res) {
        message.success('状态更新成功')
        queryDetail()
        emits('refresh')
    }
}

const detail = ref<Api.Bill.NewRemittance | null>(null)
const queryDetail = async () => {
    if (!props.orderNumber) return
    const [err, res] = await queryNewRemittanceDetail(props.orderNumber)
    if (!err && res) {
        res._createdAt = dayjs(res.createdAt * 1000).format('YYYY-MM-DD')
        detail.value = res
        status.value = res.status
    }
}

watch(visible, newVal => {
    if (newVal) {
        queryDetail()
    }
})
</script>
